<template>
  <div class="app-container">
    <el-row type="flex" style="justify-content: space-between">
            <div style="flex: 1; min-width: 0;margin-right: 5px; ">
    <div>
      <storage-customer-info :value="detailInfo"></storage-customer-info>
      <storage-order-info :value="detailInfo" v-if="detailInfo != null && detailInfo.carInStorage != null"></storage-order-info>
      <storage-purchase-info :value="detailInfo" v-if="!isShow"></storage-purchase-info>
      <storage-supplier-info :value="detailInfo" v-if="isShow"></storage-supplier-info>
      <storage-car-info :value="detailInfo" v-if="detailInfo != null && detailInfo.carInStorage != null"></storage-car-info>
    </div>
    <CommonContainer title="入库信息">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="车牌号" prop="carNo">
              <el-input v-model="form.carNo" placeholder="请输入车牌号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库里程(km)" prop="inboundMileage">
              <el-input v-model="form.inboundMileage" placeholder="请输入入库里程" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库油量(%)" prop="inboundOilQuantity">
              <el-input v-model="form.inboundOilQuantity" placeholder="请输入入库油量" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年检到期日" prop="inStorageInspectionExpire">
              <el-date-picker style="width: 100%" v-model="form.inStorageInspectionExpire" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="datetime" placeholder="选择年检到期日"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年检线上线下" prop="inStorageOnlineOffline">
              <el-select v-model="form.inStorageOnlineOffline" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否我司年检" prop="isOurCompanyInspection">
              <el-select v-model="form.isOurCompanyInspection" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in companyOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="inspectionOss">
              <template slot="label">
                <span>上传年检附件</span>
              </template>
              <image-common v-model="form.inspectionOss" :up-type="2" info="年检附件"></image-common>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库里程附件" prop="inboundMileageOss">
              <image-common v-model="form.inboundMileageOss" :up-type="2" :limit="1" info="里程表"></image-common>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="入库油量附件" prop="inboundOilQuantityOss">
              <image-common v-model="form.inboundOilQuantityOss" :up-type="2" :limit="1" info="油量表"></image-common>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="上传行驶证" prop="drivingLicenseOss">
              <image-common v-model="form.drivingLicenseOss" :up-type="2" info="行驶证"></image-common>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="上传车辆照片" prop="carPhotoOss">
              <image-common v-model="form.carPhotoOss" :up-type="2" info="车辆照片"></image-common>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item prop="registrationCertificateOss">
              <template slot="label">
                <span>上传登记证照片</span>
                <!-- <span style="color:red">(需上传信息页和变更页)</span> -->
              </template>
              <image-common v-model="form.registrationCertificateOss" :up-type="2" info="登记证照片"></image-common>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" placeholder="请输入说明" v-model="form.remark" maxlength="500" :rows="5" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件" prop="attachmentOss">
              <div class="flex">
                <image-common :up-type="2" info="上传附件" :limit="20" v-model="form.attachmentOss"></image-common>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </CommonContainer>
    </div>
    <FlowRecord v-if="flowId" :id="flowId" :customStyle="{minWidth:'280px',marginBottom:'20px'}"/>
    </el-row>

    <div class="card-wrap flex justify-end card-padding">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submitForm(1)">保存</el-button>
      <el-button type="primary" @click="submitForm(2)">提交审批</el-button>
    </div>
  </div>
</template>

<script>
import StorageCustomerInfo from '@/views/carInventory/components/StorageCustomerInfo.vue'
import StorageOrderInfo from '@/views/carInventory/components/StorageOrderInfo.vue'
import StoragePurchaseInfo from '@/views/carInventory/components/StoragePurchaseInfo.vue'
import StorageSupplierInfo from '@/views/carInventory/components/StorageSupplierInfo.vue'
import StorageCarInfo from '@/views/carInventory/components/StorageCarInfo.vue'
import * as inInventoryApi from '@/api/carInventory/inInventory'
import { watch } from 'vue-demi'
export default {
  components: { StorageCarInfo, StorageSupplierInfo, StoragePurchaseInfo, StorageOrderInfo, StorageCustomerInfo },
  props: {},
  data() {
    return {
      detailInfo: {},
      isShow: false,
      form: {
        inboundId: this.$route.query.inboundId, //入库id
        inboundMileage: null, //入库里程
        inboundMileageOss: null, //入库里程附件
        inboundOilQuantity: null, //入库油量
        inboundOilQuantityOss: null, //入库油量附件
        drivingLicenseOss: null, //行驶证
        carPhotoOss: null, //车辆
        registrationCertificateOss: null, //登记证
        attachmentOss: null, //附件
        remark: null, //备注,
        saveFlag: 0,
        carNo: '',
        inspectionOss: '',
        inStorageOnlineOffline: '',
        isOurCompanyInspection: '',
        inStorageInspectionExpire: '',
      },
      rules: {
        carNo: [{ required: true, message: '请输入车牌号', trigger: 'blur' }],
        inStorageInspectionExpire: [{ required: true, message: '请选择年检到期日', trigger: 'change' }],
        isOurCompanyInspection: [{ required: true, message: '请选择是否我司年检', trigger: 'change' }],
        inStorageOnlineOffline: [{ required: true, message: '请选择年检线上线下', trigger: 'change' }],
        inboundMileage: [
          { required: true, message: '请输入入库信息', trigger: 'blur' },
          { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输⼊正确的格式,可保留两位⼩数' },
        ],
        inboundMileageOss: [{ required: true, message: '请上传入库里程附件', trigger: 'blur' }],
        inspectionOss: [{ required: true, message: '请上传入年检附件', trigger: 'blur' }],
        inboundOilQuantity: [
          { required: true, message: '请输入入库油量', trigger: 'change' },
          { pattern: /^[0-9]*$/, message: '请输入正整数' },
        ],
        inboundOilQuantityOss: [{ required: true, message: '请上传入库油量附件', trigger: 'change' }],
        drivingLicenseOss: [{ required: true, message: '请上传行驶驾本', trigger: 'change' }],
        carPhotoOss: [{ required: true, message: '请上传车辆照片', trigger: 'change' }],
        registrationCertificateOss: [{ required: true, message: '请上传登记证照片', trigger: 'change' }],
      },
      viewType: 1, // 1.编辑
      show: true,
      flowId: null,
      yearOptions: [
        { value: '1', label: '线上' },
        { value: '2', label: '线下' },
      ],
      companyOptions: [
        { value: '0', label: '是' },
        { value: '1', label: '否' },
      ],
    }
  },
  computed: {},
  methods: {
    // 获取入库单详情
    getDetail() {
      inInventoryApi.inStorageDetails(this.form.inboundId).then((info) => {
        this.flowId = info.data?.carInStorage?.flowId
        this.detailInfo = { ...info.data, inboundId: this.$route.query.inboundId, source: this.$route.query.source }
        this.show = true
        // 完善信息
        this.form = info.data.carInStorage
      })
    },
    //保存|提交
    submitForm(type) {
      this.form.saveFlag = type
      if (type == 1) {
        //保存
        this.insertCarInStorage()
        // if (this.viewType == 1){//编辑
        //     this.updateCarInStorage()
        // }
        // else{//新增

        // }
      } else if (type == 2) {
        //提交审批
        this.commitApproval()
      }
    },
    //提交审批
    commitApproval() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // let list = this.form.registrationCertificateOss.split(',')
          // if(list.length>1){

          // }else{
          //     this.$message.error('请至少上传2张登记证照片')
          // }
          this.updateCarInStorage()
        }
      })
    },
    //保存
    insertCarInStorage() {
      const loading = this.$loading({
        lock: true,
        text: '保存中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })

      inInventoryApi
        .insertCarInStorage({ ...this.detailInfo, ...this.form })
        .then((res) => {
          if (res.code == 200) {
            loading.close()
            this.cancel()
          }
        })
        .catch(() => {
          loading.close()
        })
    },
    //编辑
    updateCarInStorage() {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      inInventoryApi
        .updateCarInStorage({ ...this.detailInfo, ...this.form })
        .then((res) => {
          if (res.code == 200) {
            loading.close()
            this.cancel()
          }
        })
        .catch(() => {
          loading.close()
        })
    },
    cancel() {
      this.$router.back()
    },
    // getQualifiedCard(purchaseNo,vinNo){
    //   if (this.Empty(purchaseNo) || this.Empty(vinNo)) return;
    //   getPurchaseQualifiedCard(purchaseNo, vinNo).then(res => {
    //     var pd = res.data;
    //     if (!pd) {
    //       pd = {};
    //     }
    //     this.detailInfo.carBasicVo.carLevel = pd.carLevel;
    //     this.detailInfo.carBasicVo.exteriorColor = pd.exteriorColor;
    //     this.detailInfo.carBasicVo.interiorColor = pd.interiorColor;
    //   }).finally(() => {
    //     this.loading = false
    //   })
    // },
    // getCarGpsInfo(carId){
    //   if (this.Empty(carId)) return;
    //   carGpsInstall(carId).then(res => {
    //     var d = res.data;
    //     if (!d) {
    //       d = {};
    //     }
    //     this.detailInfo.gpsDetailVo.gpsType = {'1':'有线','2':'无线','3':'有线+无线'}[new String(d.equipmentType).trim()];
    //   }).finally(() => {
    //     this.loading = false
    //   })
    // },
    // getQuota(orderCode, carModelName){
    //   if (this.Empty(orderCode)) return;
    //   if (this.Empty(carModelName)) return;
    //   getQuotaProductByOrderCar(orderCode, carModelName).then(res => {
    //     var pd = res.data;
    //     if (!pd) {
    //       pd = {};
    //     }
    //     if (!pd['plan']) {
    //       pd['plan'] = {};
    //     }
    //     this.detailInfo.orderInfoVo.gpsAmount = pd.plan.gpsFee;
    //     this.detailInfo.orderInfoVo.maintenanceMonthlyPrice = pd.maintenancePrice;
    //     this.detailInfo.orderInfoVo.purchaseTaxPrice = pd.carPurchaseTax;
    //     this.detailInfo.orderInfoVo.endPayMoney = pd.plan.planResidual;
    //     this.detailInfo.orderInfoVo.maintenanceAnnualMileageVal = pd.maintenanceAnnualMileageKey;
    //     this.detailInfo.orderInfoVo.payFrequency = pd.plan.planPaymentFrequencyTypeStr;
    //     this.detailInfo.orderInfoVo.paymentDate = pd.plan.planPaymentMethodType;
    //     this.detailInfo.orderInfoVo.margin = pd.plan.planContractCashdeposit;
    //     this.detailInfo.orderInfoVo.firstPayMoney = pd.plan.planFirstRent;
    //     this.detailInfo.orderInfoVo.retrofittingFee = Number(pd.otherFeeAmount) + Number(pd.attachedDecorationAmount);
    //     this.detailInfo.orderInfoVo.registerPrice = pd.carLicensePrice;
    //     this.detailInfo.orderInfoVo.logisticFee = pd.plan.logisticFee;
    //     this.detailInfo.orderInfoVo.planRent = pd.plan.planRent;
    //     this.detailInfo.orderInfoVo.leaseTerm = pd.plan.planTenancyType;
    //   }).finally(() => {
    //     this.loading = false
    //   })
    // },
  },
  created() {
    this.getDetail()
    if (this.$route.query?.source == 1) {
      this.isShow = true
    } else {
      this.isShow = false
    }
  },
  mounted() {
    // this.getDetail()
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

.el-form-item {
  margin-bottom: 15px;
  width: 70%;
}
</style>
